<template>
  <div class="Globallist">
    <div class="main">
      <p style="font-size:20px;font-weight: bold;">全球榜</p>
      <div class="imglist">
        <div class="imgp" v-for="(item,index) in list1" :key="item.id">
          <img :src="item.coverImgUrl" alt="#">
          <div style="position:relative;left: 140px;top: -200px;font-size: 13px;color: #fff;" v-for="(item1,index1) in Playquantitylist" :key="index1" v-show="index==index1">
            <i class="iconfont icon-24gl-play" style="font-size:12px;"></i><span>{{item1}}</span>
          </div>
          <p style="margin-top: -20px;word-wrap:break-word; ">{{item.name}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Globallist',
  data() {
    return {
      list1: [],
      //歌单的播放数量
      Playquantity: [],
      Playquantitylist: []
    }
  },
  computed: {
    ...mapState({
      list: state => state.RankingList.list
    })
  },
  mounted() {},
  watch: {
    list: {
      handler(v, o) {
        for (let i = 4; i < v.length; i++) {
          this.list1.push(v[i])
        }
        setTimeout(() => {
          let a = []
          let b = this.list1
          a = [].concat(
            ...b.map(val => {
              return val.playCount
            })
          )
          this.Playquantity = a
          setTimeout(() => {
            for (let i = 0; i < this.list1.length; i++) {
              if (this.Playquantity[i].toString().length < 7) {
                this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 2) + '万')
              } else if (this.Playquantity[i].toString().length < 8) {
                this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 3) + '万')
              } else if (this.Playquantity[i].toString().length < 9) {
                this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 4) + '万')
              } else if (this.Playquantity[i].toString().length < 10) {
                this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 1) + '亿')
              } else if (this.Playquantity[i].toString().length < 11) {
                this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 2) + '亿')
              } else if (this.Playquantity[i].toString().length < 12) {
                this.Playquantitylist.push(this.Playquantity[i].toString().slice(0, 3) + '亿')
              }
            }
          }, 300)
        }, 300)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.Globallist {
  .main {
    .imglist {
      display: flex;
      display: grid;
      grid-template-columns: auto auto auto auto auto;
      width: 1150px;
      overflow: hidden;

      .imgp {
        width: 200px;
        margin-bottom: 20px;
        img {
          width: 200px;
          border-radius: 5px;
          height: 200px;
        }
      }
    }
  }
}
</style>